<template>
  <div class="pagination">
    <el-pagination background layout="prev, pager, next" @size-change="handleSizeChange"
      @current-change="handleCurrentChange" :current-page="pageNo" :page-size="pageSize" :total="total"></el-pagination>
  </div>
</template>

<script>
import { scrollTo } from '@/utils/scroll-to'

export default {
  props: {
    pageNo: {
      default: 1,
    },
    pageSize: {
      default: 10,
    },
    total: {
      default: 0,
    },
    pageRange: {
      default: () => [20, 50, 100, 500, 1000, 5000],
      type: Array,
    },
    autoScroll: {
      type: Boolean,
      default: true
    },
  },
  data() {
    return {};
  },
  methods: {
    handleCurrentChange(val) {
      this.$emit("update:pageNo", val);
      this.$emit("change");
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    },
    handleSizeChange(val) {
      this.$emit("update:pageSize", val);
      this.$emit("change");
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    },
  },
};
</script>
<style scoped>
::v-deep .el-pagination.is-background .el-pager li:not(.disabled).active {
  color: #fff;
  /* background-color: #0b3395; */
}
::v-deep .el-pager .number:hover {
  color: #965f29;
}
</style>
<style lang="scss" scoped>
.pagination {
  // transform: scale(0.9);
  // transform-origin: right center;
  text-align: center;
  padding: 20px 0 10px;
}
</style>